<template>
  <el-skeleton :loading="loading">
    <el-form :model="formGroup" :rules="{ dataset: {required: true, message: '请选择数据'} }" ref="formRef" class="lesson-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="gradeId">
            <el-select placeholder="请选择年份" v-model="formGroup.year" clearable @change="handle">
              <el-option v-for="o in selectMap.years" :key="o.id" :label="o.name" :value="o.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="semesterId">
            <el-select placeholder="请选择学期" v-model="formGroup.semesterId" clearable @change="handle">
              <el-option v-for="o in selectMap.semesters" :key="o.id" :label="o.name" :value="o.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="courseTypeId">
            <el-select placeholder="请选择班型" v-model="formGroup.courseTypeId" clearable @change="handle">
              <el-option v-for="o in selectMap.courseTypes" :key="o.id" :label="o.name" :value="o.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="gradeId">
            <el-select placeholder="请选择年级" v-model="formGroup.gradeId" clearable @change="handle">
              <el-option v-for="o in selectMap.grades" :key="o.id" :label="o.name" :value="o.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="dataset">
        <el-cascader collapse-tags clearable placeholder="请选择课程" :show-all-levels="false"
          v-model="formGroup.dataset"
          :options="selectMap.cascaderOptions"
          :props="{ children: 'courseIndexList', label: 'courseName', value: 'id', multiple: true, emitPath: false, disabled: 'isExist' }"
        />
      </el-form-item>
    </el-form>
  </el-skeleton>
</template>

<script lang="ts">
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus';
import $ from '$';

export default {
  props: { id: String },
  setup(props) {
    let store = useStore();
    let formRef = ref();
    let loading = ref(true);
    let formGroup = reactive({
      courseTypeId: null,
      gradeId: null,
      semesterId: null,
      year: null,
      dataset: []
    });
    let selectMap = reactive({
      courseTypes: [],
      grades: [],
      years: [],
      semesters: [],
      cascaderOptions: []
    })
    $.http.post('/permission/user/userDataRules', { userId: store.getters.userInfo.user.id, subjectCode: store.getters.subject.code }).then(res => {
      selectMap.courseTypes = res.json.courseTypes;
      selectMap.grades = res.json.grades;
      loading.value = false;
    });
    $.http.post('/system/dictionary/queryDictByCodes', { typeCodesStr: 'SEMESTER,YEAR' }).then(res => {
      selectMap.years = res.json.YEAR;
      selectMap.semesters = res.json.SEMESTER;
    })

    const handle = async () => {
      let { courseTypeId, gradeId, semesterId, year } = formGroup;
      let res = await $.http.post('/course/query', { subjectId: store.getters.subject.code, materialId: props.id, courseTypeId, gradeId, semesterId, year });
      let data = res.json.map(i => { i.courseIndexList = i.courseIndexList.map(a => { a.courseName = a.courseIndexName; a.isExist = a.isExist > 0 ? true : false; return a }); return i; })
      selectMap.cascaderOptions = data;
    }
    handle();

    const save = (resolve, reject) => {
      formRef.value.validate(async valid => {
        if (valid) {
          let params = formGroup.dataset.map(i => ({
            courseIndexId: i,
            materialId: props.id,
            courseId: (selectMap.cascaderOptions.find((c: any) => !!c.courseIndexList.find((a: any) => a.id === i)) as any).id
          }))
          let res = await $.http.json('/admin/materialCourseIndex/add', params);
          ElMessage[res.result ? 'success' : 'warning'](res.result ? '添加到备课成功~!' : res.msg);
          res.result ? resolve() : reject();
        } else {
          reject();
        }
      });
    }

    return { formGroup, selectMap, handle, save, formRef, loading }

  }
}
</script>

<style lang="scss" scoped>
.lesson-container {
  :deep(.el-select),
  :deep(.el-cascader) {
    width: 100%;
  }
}
</style>
